<template>
  <div class="peer-item" @click="goDetail(item)">
    <div class="peer-item-content">
      <list-more @getData="getData" :item="item" :quickFilter="quickFilter" v-on="$listeners"></list-more>
      <div class="peer-item-icon">
        <el-image style="width: 100%; height: 100%" :src="item.icon"></el-image>
      </div>
      <div class="peer-item-text">
        <div class="peer-item-name">{{ item.name }}</div>
        <div class="peer-item-info" v-if="item.meets && item.meets.repeat === 'No Repeats'">Meets: Group meet start {{GlobalTimeformat(item.meets.meetsTimeAtZone, '', $store.state.timeFormat)}} at {{ item.meets.meetsTimeAtZone | hh($store.state.user.timezoneId) }}</div>
        <div class="peer-item-info" v-if="item.meets && item.meets.repeat === 'Daily'">Meets: Group meet start Every day at {{ item.meets.meetsTimeAtZone | hh($store.state.user.timezoneId) }} {{ item.meets.meetsTimeAtZone | tz($store.state.user.timezoneId) }}</div>
        <div class="peer-item-info" v-if="item.meets && item.meets.repeat === 'Weekly'">Meets: Group meet start Every {{item.meets.meetsTimeAtZone | ee($store.state.user.timezoneId)}} at {{ item.meets.meetsTimeAtZone | hh($store.state.user.timezoneId) }} {{ item.meets.meetsTimeAtZone | tz($store.state.user.timezoneId) }}</div>
        <div class="peer-item-info" v-if="item.meets && item.meets.repeat === 'Monthly'">Meets: Group meet start Every {{item.meets.meetsTimeAtZone | dd($store.state.user.timezoneId)}}th of the month at {{ item.meets.meetsTimeAtZone | hh($store.state.user.timezoneId) }} {{ item.meets.meetsTimeAtZone | tz($store.state.user.timezoneId) }}</div>
        <div class="peer-item-info" v-if="item.meets && item.meets.repeat === 'Quarterly'">Meets: Group meet start {{ item.meets.meetsTimeAtZone | hh($store.state.user.timezoneId) }} on the {{item.meets.meetsTimeAtZone | dd($store.state.user.timezoneId)}} of the {{item.meets.meetsTimeAtZone | mm($store.state.user.timezoneId)}} month of each quarter {{ item.meets.meetsTimeAtZone | tz($store.state.user.timezoneId) }}</div>
        <div class="peer-item-info" v-if="item.meets && item.meets.repeat === 'Annually'">Meets: Group meet start {{item.meets.meetsTimeAtZone | mmm($store.state.user.timezoneId)}} {{ item.meets.meetsTimeAtZone | dd($store.state.user.timezoneId) }}th of every year at {{ item.meets.meetsTimeAtZone | hh($store.state.user.timezoneId) }} {{ item.meets.meetsTimeAtZone | tz($store.state.user.timezoneId) }}</div>
        <div class="peer-item-info2">{{ item.description }}</div>
      </div>
    </div>
    <div class="peer-item-operate">
      <div>
        <el-button
            @click.stop=""
            v-if="quickFilter === 'my-group'"
            type="info" size="mini"
            :icon="item.properties === 'Private' ? 'el-icon-lock' : 'el-icon-unlock'">
          {{ item.properties === 'Private' ? 'Private' : 'Public'}}
        </el-button>
        <template v-else>
          <el-button class="not_in_group" size="mini" @click.stop="" v-if="!item.currentUser">Not In Group</el-button>
          <el-button class="applying" size="mini" @click.stop="" v-if="item.currentUser && item.currentUser.status === 2">Applying</el-button>
          <el-button class="in_group" size="mini" @click.stop="" v-if="item.currentUser && item.currentUser.status === 1">In Group</el-button>
        </template>
      </div>
      <div v-if="(item.properties === 'Public' && item.publicMembers) || quickFilter === 'my-group'">
        <el-avatar v-for="(items, index) in item.groupUsers" :key="index" :size="25" v-if="index < 3" :src="items.headUrl">
          <img :src="avatar"/>
        </el-avatar>
        <el-avatar :size="25" v-if="item.groupUsers.length - 3 > 0"><span class="avatar-number">{{item.groupUsers.length - 3 > 99 ? '99+' : '+'+String(item.groupUsers.length - 3) }}</span></el-avatar>
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import listMore from '@/views/modules/mspbots/peerGroup/groupList/listMore'
import { GlobalTimeformat } from '@/utils/common'
import avatar from '@/assets/default_avatar.png'
export default {
  name: 'groupListItem',
  props: ['item', 'quickFilter'],
  components: {
    listMore
  },
  data () {
    return {
      avatar,
      GlobalTimeformat
    }
  },
  methods: {
    goDetail (item) {
      let query = {
        groupId: item.id,
        name: item.name,
        page: this.quickFilter
      }
      if (item.currentUser && item.currentUser.hasOwnProperty('type')) {
        query.type = item.currentUser.type
      }
      if (!item.currentUser || (item.currentUser && item.currentUser.status === 2)) {
        query.notInGroup = true
      }
      this.$router.push({ path: '/peerGroupDetail', query: query })
    },
    getData () {
      this.$emit('getData')
    }
  },
  filters: {
    YYYY (val, timezoneId) {
      return moment.tz(val, timezoneId).format('YYYY-MM-DD')
    },
    mm (val, timezoneId) {
      const m = moment.tz(val, timezoneId).format('M')
      const q = moment.tz(val, timezoneId).format('Q')
      const num = m - (q - 1) * 3
      const arr = ['first', 'second', 'Third']
      return arr[num - 1]
    },
    mmm (val, timezoneId) {
      return moment.tz(val, timezoneId).format('MMMM')
    },
    dd (val, timezoneId) {
      return moment.tz(val, timezoneId).format('DD')
    },
    hh (val, timezoneId) {
      return moment.tz(val, timezoneId).format('HH:mm')
    },
    ee (val, timezoneId) {
      return moment.tz(val, timezoneId).format('dddd')
    },
    tz (val, timezoneId) {
      return moment.tz(val, timezoneId).format('zz')
    }
  }
}
</script>

<style scoped lang="scss">
.not_in_group {
   color: #4D5358;
   background-color: #F2F4F8 ;
   font-size: 14px;
   border: 1px solid;
   border-image: linear-gradient(180deg, rgba(#000000, 0.06), rgba(#000000, 0.16)) 1 1;
   clip-path: inset(0 round 3px);
}
.applying {
   color: #0043CE;
   background-color:#EDF5FF;
   font-size: 14px;
   border: 1px solid;
   border-image: linear-gradient(180deg, rgba(#000000, 0.06), rgba(#000000, 0.16)) 1 1;
   clip-path: inset(0 round 3px);
}
.in_group {
   color: #198038;
   background-color:#DEFBE6;
   font-size: 14px;
   border: 1px solid;
   border-image: linear-gradient(180deg, rgba(#000000, 0.06), rgba(#000000, 0.16)) 1 1;
   clip-path: inset(0 round 3px);
}
.peer-item{
  min-height: 134px;
  padding: 0 12px;
  border-radius: 4px;
  border: 1px solid #0000000F;
  margin-bottom: 12px;
  cursor: pointer;
  &-content {
    display: flex;
    padding: 12px 0;
    border-bottom: 1px solid #00000014;
    position: relative;
  }
  &-more {
    position: absolute;
    right: 23px;
    top: 27px;
    cursor: pointer;
    i {
      font-size: 16px;
    }
  }
  &-operate {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    padding-right: 10px;
  }
  &-icon {
    width: 40px;
    height: 40px;
    border-radius: 2px;
    border: 1px solid #0000000F;
    flex-shrink: 0
  }
  &-text {
    margin-left: 16px;
    width: 100%;
  }
  &-name {
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
    width: 85%;
  }
  &-info {
    font-size: 12px;
    color: #00000072;
    line-height: 16px;
  }
  &-info2 {
    font-size: 14px;
    color: #000000E5;
    line-height: 20px;
    word-break: break-all;
  }
}
.avatar-number {
  display: inline-block;
  transform: scale(0.8);
}
</style>
